// AUDIT EVENT MANAGER HTML
// -------------------------------------------------------------------------

#auditevents.full-overlay(style="display:none")
    div.full-overlay-contents
        img.close(src="images/ico-x.png")
        h2 Audit Events

        // Tabs shown on top of the overlay.
        #auditevents-tabheaders.tab-headers
            label(data-tab="#auditevents-tab-props", title="View and edit the selected event's general properties.").active Properties
            label(data-tab="#auditevents-tab-rules", title="View and edit the selected event's rules.") Rules
            label(data-tab="#auditevents-tab-actions", title="View and edit the selected event's actions.") Actions

        // The left panel has the Audit Events grid (list with all registered audit alerts).
        .left-col
            // This "Audit Events list" is populated via javascript.
            #auditevents-list.models-list

            if roles.admin || roles.auditevents
                div.create
                    input#auditevents-txt-create(type="text", placeholder="New audit event ID...", title="Enter the name of the new audit event to be created.", data-validation="type:nospecial")
                    button#auditevents-but-create(title="Click to create a new audit event with the specified name.") Create

                div.notes.small.
                     Please note that only normal characters and numbers are allowed
                     on the ID field. Special characters and spaces will be normalized.


        // The right panel has the tabs and forms for editing and adding rules and actions to the selected audit event.
        .right-col

            // Event Properties tab.
            #auditevents-tab-props.tab
                h4 Event Properties
                .panel
                    div
                        label(for="auditevents-txt-description") Description:
                        input#auditevents-txt-description.required.long(type="text", data-propertyname="description", title="Enter a description for this Audit Event.")
                .panel
                    div
                        label(for="auditevents-chk-active") Active:
                        label.toggle(for="auditevents-chk-active", data-propertyname="active", title="If OFF, this event won't be triggered even if it has matching rules.")
                            input#auditevents-chk-active(type="checkbox", name="auditevents-chk-active")
                            span

            // Event Rules tab.
            #auditevents-tab-rules.tab(style="display:none")
                h4 Event Rules
                div.panel

                    div.row.header
                        span.source Source value
                        span.comparator Symbol
                        span.target Target value

                    // This "alert rules" grid is populated via javascript.
                    .grid

                    // Pressing enter on any of the fields below will trigger the "Add rule" button
                    // and create a new alert rule.
                    div.row.addrow
                        input.source(type="text", placeholder="New rule source value...")
                        select.comparator
                            option =
                            option !=
                            option >
                            option >=
                            option <
                            option <=
                        input.target(type="text", placeholder="New rule target value...")
                        .add(title="Click to create a new RULE with the specified values and comparator.")

                div.info.
                    The source value is mandatory. If you're comparing an Audit Data property with a static value,
                    always add the Audit Data value on the source, not on the target.
                    <br /><br />
                div.strong Examples for source and target value:
                div.sample
                    label shape's left label is less than 50:
                    span @left < 50
                div.sample
                    label shape's top label is more than bottom value:
                    span @top > @bottom
                div.sample
                    label shape's center label differs from an Audit Data value:
                    span @center != #audit.AuditDataId.recordId

            // Event Actions tab.
            #auditevents-tab-actions.tab(style="display:none")
                h4 Event Actions
                div.panel

                    div.row.header
                        span.type What to do?
                        span.value Value or message

                    // This "alert actions" grid is populated via javascript.
                    .grid

                    // Pressing enter on any of the fields below will trigger the "Add action" button
                    // and create a new alert action.
                    div.row.addrow
                        select.type
                            option(value="blink") blink
                            option(value="colorBg") background color
                            option(value="colorBorder") border color
                            option(value="footerMessage") footer message
                        input.value(type="text", placeholder="New action color or message...")
                        .add(title="Click to create a new ACTION with the specified type and value.")

                div.info.
                    The "value" is mandatory only for "show footer message" actions. The default background / border color
                    action is Red, and blink is 2 (will blink the shape twice). If no "Shape ID" is specified, it will
                    apply the action on all related shapes visible on the map.